<template>
    <div class="all">
        <div class="bg">
            <video muted="muted" src="../../video/vv2.mp4" autoplay="autoplay" loop="loop" class="video"></video>
        </div>

        <div class="mask">
            <h1 class="title">{{ pageInfo.title }}</h1>
            <!-- 动态组件 -->
            <component :is="pageInfo.component"></component>

            <div class="sms" @click="showSms">
                <svg class="icon" aria-hidden="true">
                    <use :xlink:href=icon></use>
                </svg>
                <b @click="handToggle">{{ pageInfo.toggleDes }}</b>
            </div>

        </div>
    </div>
</template>
  
<script setup>
import * as api from "../../api/users"
import { ref, watchEffect,markRaw,computed } from 'vue'
// 引入校验函数
// import { useSubmitForm } from "../../composition/login/vaildate"
import commonLogin from "./commonLogin.vue"
import smsLogin from "./sms.vue"
// console.log(api);
// markRaw可以将响应式的ref变成常规对象
// 声明一个页面数据
let pageInfo = ref({
    title: '管理系统',//标题
    loginType: 'common',//登入类型
    toggleDes: '点击切换短信登入',//切换描述信息
    component: commonLogin//对应的组件
})
// 标记是否常规登入
let isCommonLogin = ref(true)
// 点击切换登入方式
let handToggle = () => {
    isCommonLogin.value = !isCommonLogin.value
}

// 通过结合watchEffect和vue3动态组件来实现组件切换
watchEffect(() => {
    if (isCommonLogin.value) {//常规登入
        pageInfo.value = {
            title: '管理系统',//标题
            loginType: 'common',//登入类型
            toggleDes: '点击切换短信登入',//切换描述信息
            component: markRaw(commonLogin)//对应的组件
        }
    } else {//手机短信登入
        pageInfo.value = {
            title: '短信登入',//标题
            loginType: 'sms',//登入类型
            toggleDes: '使用用户密码登入',//切换描述信息
            component: markRaw(smsLogin)//对应的组件
        }
    }
})

// 根据登入模式切换，派发图标的名称
let icon = computed(()=>{
    return isCommonLogin.value ? '#icon-iphone':'#icon-icon-test'
})
</script> 
<style lang="less" scoped>
.all {
    .video {
        width: 1920px;
        // height: 100%;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    .mask {
        width: 500px;
        height: 500px;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 100px;
        left: 100px;

        h1 {
            text-align: center;
            padding: 80px 0 60px 0;
        }
    }
}

.sms {
    text-align: center;
    color: white;
    cursor: pointer;

    .icon {
        vertical-align: middle;
    }
}
</style>
  